<!--
禁止修改!此文件是产品代码的一部分，后续可能变更或者不再开放。
若有问题，请参考前端相关二开文档。
-->
<template>
  <div class="process-time-analysis">
    <div v-if="showReportTypeChange" class="change-report-type-box">
      <span class="report-type-icon aufontAll h-icon-all-field-time"></span>
      <span class="change-report-type">统计</span>
      <a-dropdown
        v-model="menuOpen"
        placement="bottomRight"
        class="change-report-menu"
        overlayClassName="report-type-menu-box"
        :trigger="['click']"
      >
        <span
          class="ant-dropdown-link"
          :class="{ active: menuOpen }"
          @click.prevent="menuOpen = !menuOpen"
        >
          <span class="menu-text">{{ reportTypeName }}</span>
          <span
            v-if="menuOpen"
            class="icon aufontAll h-icon-all-up-o"
            style="font-size: 12px"
          ></span>
          <span
            v-else
            class="icon aufontAll h-icon-all-down-o"
            style="font-size: 12px"
          ></span>
        </span>
        <template #overlay>
          <a-menu>
            <a-menu-item
              class="sort-type-menu"
              :class="{ active: reportType === '1' }"
            >
              <router-link
                to="/workflow-center/process-time-analysis-work-day"
                @click.native="menuOpen = false"
                >按工作日</router-link>
            </a-menu-item>
            <a-menu-item
              class="sort-type-menu"
              :class="{ active: reportType === '2' }"
            >
              <router-link
                to="/workflow-center/process-time-analysis"
                @click.native="menuOpen = false"
                >按自然日</router-link>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div
      v-if="showReportTypeChange"
      class="h3-report-view-header placeholder-element"
    >
      <div class="h3-report-view-header__right">
        <div class="h3-dropdown">
          <div class="h3-dropdown__reference">
            <span class="h3-report-view-header__right-item active">
              <svg
                aria-hidden="true"
                class="report-icon h3-report-view-header__tool-icon"
                style="width: 16px; height: 16px"
              >
                <use xlink:href="#icon-a-tool-filter-stroke1" />
              </svg>
              11项筛选
            </span>
          </div>
        </div>
        <div class="h3-dropdown" style="margin-left: 16px">
          <div class="h3-dropdown__reference">
            <span class="h3-report-view-header__right-item">
              <svg
                aria-hidden="true"
                class="report-icon h3-report-view-header__tool-icon"
                style="width: 16px; height: 16px"
              >
                <use xlink:href="#icon-Home-full-screen-fill" />
              </svg>
              全屏
            </span>
          </div>
        </div>
        <div class="h3-dropdown" style="margin-left: 16px">
          <div class="h3-dropdown__reference">
            <span class="h3-report-view-header__right-item">
              <svg
                aria-hidden="true"
                class="report-icon h3-report-view-header__tool-icon"
                style="width: 16px; height: 16px"
              >
                <use xlink:href="#icon-tool-export-stroke" />
              </svg>
              导出图片
            </span>
          </div>
        </div>
      </div>
    </div>
    <ReportAnalysis :objectId="objectId" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import ReportAnalysis from 'cloudpivot/common/src/components/pc/report-analysis/report-analysis.vue';
import ReportInfos from 'cloudpivot/common/src/components/pc/report-analysis/report-info';
import { Dropdown, Menu } from '@h3/antd-vue';

@Component({
  name: 'process-time-analysis',
  components: {
    ReportAnalysis,
    ADropdown: Dropdown,
    AMenu: Menu,
    AMenuItem: Menu.Item,
  },
})
export default class processTimeAnalysis extends Vue {
  objectId = '';

  menuOpen = false;

  reportType = '1';

  reportTypeName = '按工作日';

  showReportTypeChange: boolean = false;

  getShowReportTypeChange() {
    const element = document.querySelector(
      '.process-time-analysis .h3-dashboard-container',
    );
    if (element) {
      this.showReportTypeChange = true;
    } else {
      setTimeout(() => {
        this.getShowReportTypeChange();
      }, 200);
    }
  }

  @Watch('$route', { immediate: true })
  onRouteChagne(to, from) {
    const { name } = this.$route;
    if (name === 'processTimeAnalysis') {
      this.objectId = ReportInfos.ProcessTimeAnalysis.objectId;
      this.reportType = '2';
      this.reportTypeName = '按自然日';
    } else if (name === 'processTimeAnalysisWorkDay') {
      this.objectId = ReportInfos.ProcessTimeAnalysisWorkDay.objectId;
      this.reportType = '1';
      this.reportTypeName = '按工作日';
    }
  }

  created() {
    const { name } = this.$route;
    if (name === 'processTimeAnalysis') {
      this.objectId = ReportInfos.ProcessTimeAnalysis.objectId;
      this.reportType = '2';
      this.reportTypeName = '按自然日';
      this.getShowReportTypeChange();
    } else if (name === 'processTimeAnalysisWorkDay') {
      this.objectId = ReportInfos.ProcessTimeAnalysisWorkDay.objectId;
      this.reportType = '1';
      this.reportTypeName = '按工作日';
      this.getShowReportTypeChange();
    }
  }

  beforeDestroy() {
    this.showReportTypeChange = false;
  }
}
</script>

<style lang="less" scoped>
.process-time-analysis {
  width: calc(100% + 24px);
  height: calc(100% + 40px);
  margin: -16px 0 -24px -24px;
  position: relative;
  .change-report-type-box {
    display: flex;
    align-items: center;
    position: absolute;
    top: 12px;
    right: 283px;
    z-index: 1;
    height: 28px;
    line-height: 28px;
    .report-type-icon {
      font-size: 16px;
      color: #111218;
      margin-right: 4px;
    }
    .change-report-type {
      margin-right: 4px;
      font-size: 13px;
      font-weight: 400;
      color: #111218;
      line-height: 20px;
    }
    .change-report-menu {
      display: inline-block;
      width: 88px;
      height: 28px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d4d5d6;
      padding: 2px 7px;
      font-size: 13px;
      font-weight: 400;
      color: #111218;
      line-height: 22px;
      cursor: pointer;
      .menu-text {
        margin-right: 8px;
      }
    }
  }
  .placeholder-element {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>

<style lang="less">
@import '~cloudpivot-list/application/src/components/pc/style/custom-themes';
.report-type-menu-box {
  .ant-dropdown-menu-item {
    > a {
      height: 32px;
      font-size: 14px;
      font-weight: 400;
      color: #111218;
    }
    &:hover {
      background: @hoveBGColor;
    }
    &.active {
      background: @activeBGColor;
    }
  }
}
</style>
